<template>
  <div class="css-func">
    <Row class="title-top mb-10">
      <h2>pointer-events属性：auto,none</h2>
    </Row>
    <Row>
      <p class="title">举个栗子:两个父子元素重叠</p>
      <div class="grandfather" onclick="alert('l am grandfather');">
        <div class="parent" onclick="alert('l am father')">
          <div class="child" onclick="alert('l am child')"></div>
        </div>
      </div>
      <div class="mb-20">
        <label class="text">总结:</label>
        <p>
          <label class="title">1、元素默认的pointer-events 属性为 auto</label
          >,鼠标在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应的动作
        </p>
        <p>
          <label class="title">2、将元素的pinter-events 属性设置为 none</label
          >,鼠标的动作将不能被该元素及其子元素所捕获，只能够被父元素捕获
        </p>
      </div>
    </Row>
    <Row>
      <p class="title">举个栗子：两个同级元素的重叠</p>
      <div class="container">
        <div class="div_parent" onclick="alert('l am parent');"></div>
        <div class="div_child" onclick="alert('l am child')"></div>
        <div class="summary mb-10">
          <label class="text">总结:</label>
          <p>
            1、若HTML上两个元素之间没有包含关系，鼠标事件就不会在这两个元素之间传递
          </p>
          <p>
            2、若HTML上两个元素间有包含关系，那么，子元素获得鼠标事件后，会传递给父元素
          </p>
        </div>
      </div>
    </Row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
@Component
export default class CssFunc extends Tools {}
</script>
<style lang="stylus" scoped>
.css-func {
  .grandfather {
    height: 250px
    background: orange
    width: 300px
    border: 1px solid
  }
  .parent {
    height: 70%
    background-color: #bbb
    margin: 30px
    border: 1px solid
    /* 设置元素的 pointer-event属性 */
    pointer-events: none
  }
  .child {
    height: 70%
    background-color: deepskyblue
    margin: 30px
  }
  .div_parent {
    position: absolute
    height: 150px
    width: 150px
    background-color: #bbb
    top: 20px
    left: 20px
  }
  .div_child {
    position: absolute
    height: 100px
    width: 100px
    background-color: deepskyblue
    top: 40px
    left: 40px
    // pointer-events: none  点击child弹出parent，点击parent弹出parent
    pointer-events: auto // 点击child弹出child且不会弹出parent，点击parent弹出parent
  }
  .title {
    font-size: 12px
    font-weight: 700
    color: #f19000
  }
  .text {
    font-size: 12px
    font-weight: 700
    color: red
  }
  .container {
    position: relative
    display: block
    height: 260px
  }
  .summary {
    bottom: 0px
    position: absolute
  }
}
</style>
